import React from 'react';
import { 
  Row, 
  Col, 
  Card, 
  Typography, 
  Space, 
  Progress, 
  Button, 
  List, 
  Statistic, 
  Alert,
  Timeline,
  Badge,
  Tabs,
} from 'antd';
import { useNavigate } from 'react-router-dom';
import {
  UserOutlined,
  TeamOutlined,
  SecurityScanOutlined,
  SettingOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  SafetyCertificateOutlined,
  BarChartOutlined,
  ClockCircleOutlined,
  ApartmentOutlined,
  CrownOutlined,
  EyeOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  SyncOutlined,
  FireOutlined,
  ThunderboltOutlined,
  BugOutlined,
  DashboardOutlined,
  LineChartOutlined,
  RadarChartOutlined,
} from '@ant-design/icons';
import { useDashboard } from '../../hooks/common/useDashboard';
import UserTrendChart from '../../components/charts/UserTrendChart';
import SystemMetricsRadar from '../../components/charts/SystemMetricsRadar';

const { Text } = Typography;

const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  const { stats, metrics, activities, features, alerts, loading, refreshAll } = useDashboard();


  return (
    <div style={{ 
      padding: '24px', 
      background: 'linear-gradient(135deg, #fafafa 0%, #f0f9ff 30%, #f6f8fa 70%, #fff 100%)', 
      minHeight: '100vh' 
    }}>
      {/* 页面标题 */}
      <div style={{ marginBottom: 32 }}>
        <Space>
          <DashboardOutlined style={{ fontSize: 24, color: '#1890ff' }} />
          <Typography.Title level={2} style={{ margin: 0, color: '#262626' }}>
            数据仪表盘
          </Typography.Title>
        </Space>
        <Typography.Text type="secondary" style={{ fontSize: 16 }}>
          实时监控系统状态和业务数据
        </Typography.Text>
      </div>



      {/* 图表展示区域 */}
      <Row gutter={[24, 24]} style={{ marginBottom: 32 }}>
        {/* 用户趋势图表 */}
        <Col xs={24} xl={16}>
          <UserTrendChart loading={loading} />
        </Col>
        
        {/* 系统指标雷达图 */}
        <Col xs={24} xl={8}>
          <SystemMetricsRadar loading={loading} />
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;